<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<title>无标题文档</title>
<style type="text/css">
	/*公共基础begin*/
	*{margin:0;padding:0;}
	body{padding:0;background:#FFF;}
	div,table,td,li,input,select,dd{font-size:12px;font-family:Arial, Helvetica, sans-serif,"宋体";}
	img{border:0px;}
	ul,li{list-style: none;}
	
	/*各类通用样式begin*/
	.clear{clear:both; font-size:1px; line-height:1px;}
	
	/*链接样式*/
	a:link{color:#000; text-decoration:none;}
	a:visited{color:#000; text-decoration:none;}
	a:hover{color:#c00; text-decoration:none;}
	a:active {color:#c00; text-decoration:none;}
	
	/* 产品展示样式 */
	.viewPanel{width:320px; overflow:hidden; _zoom:1;}
	.viewPanel ul:after{content:"."; display:block; clear:both; visibility:hidden; height:0;}
	.viewPanel ul{overflow:hidden; _zoom:1;}
	.viewPanel ul.scope{margin-bottom:6px;}
	
	.viewPanel ul.scope li{float:left; width:316px; height:316px; line-height:316px; padding:1px; border:1px solid #ccc; overflow:hidden; position:relative; text-align:center;display:none;}
	.viewPanel ul.scope li.on{display:list-item;}
	.viewPanel ul.scope li span{position:static; +position:absolute; top:50%; vertical-align:middle;}
	.viewPanel ul.scope li img{position:static; +position:relative; top:-50%; left:-50%; vertical-align:middle; max-width:316px; max-height:316px;
		margin-top:-6px; /* 所有浏览器 */
		margin-top:-2px\9; /* ie8 */
		*+margin-top:0; /* ie7 */
		_width:316px; _height:316px; _margin-top:-1px; /* ie6 */
	}
	/* 针对Chrome和Safari等Webkit核心浏览器的CSS hack */
	@media screen and (-webkit-min-device-pixel-ratio:0){
		.viewPanel ul.scope li img{position:static; top:-50%; left:-50%; vertical-align:middle; max-width:316px; max-height:316px; padding-top:1px;}
	}

	.viewPanel ul.list{width:280px; margin:0 auto;}
	.viewPanel ul.list li{position:relative; width:60px; height:60px; line-height:60px; cursor:pointer; float:left; text-align:center; border:1px solid #ccc; padding:1px; overflow:hidden; _zoom:1; margin:0 3px!important; margin:0 2px;}
	.viewPanel ul.list li span{position:static; +position:absolute; top:50%; vertical-align:middle;}
	.viewPanel ul.list li img{position:static; +position:relative; top:-50%; left:-50%; vertical-align:middle; max-height:60px; max-width:60px;
		margin-top:-6px; /* 所有浏览器 */
		margin-top:-2px\9; /* ie8 */
		*+margin-top:0; /* ie7 */
		_height:60px; _width:60px; _margin-top:-1px; /* ie6 */
	}
	/* 针对Chrome和Safari等Webkit核心浏览器的CSS hack */
	@media screen and (-webkit-min-device-pixel-ratio:0){
		.viewPanel ul.list li img{position:static; top:-50%; left:-50%; vertical-align:middle; max-height:60px; max-width:60px; padding-top:1px;}
	}
	.viewPanel ul.list li.on{border:1px solid #c00;}
	
</style>
<script>
	$(function($){
			$('.viewPanel .list li').mouseover(
				function(){
					var $this = $(this);
					var $scope = $('.viewPanel .scope');
					$('li.on',$scope).removeClass();
					$('li',$scope).eq($this.index()).addClass('on');
					$this.parent('ul.list').find('li').removeClass();
					$this.addClass('on');
				}
			);
	});
</script>
</head>

<body>
<div class="viewPanel">
    <ul class="scope">
      <li class="on">
        <span><a href="#"><img src="1/10.jpg" /></a></span>
      </li>
      <li>
        <span><a href="#"><img src="1/2.jpg" /></a></span>
      </li>
      <li>
        <span><a href="#"><img src="1/3.jpg" /></a></span>
      </li>
      <li>
        <span><a href="#"><img src="1/4.jpg" /></a></span>
      </li>
    </ul>
    <ul class="list">
      <li class="on">
        <span><img src="1/1.jpg"/></span>
      </li>
      <li>
        <span><img src="1/2.jpg"/></span>
      </li>
      <li>
        <span><img src="1/3.jpg"/></span>
      </li>
      <li>
        <span><img src="1/4.jpg"/></span>
      </li>
    </ul>
  </div>
  <script>
  	$('img').error(function(){
			this.src = 'http://www.360buy.com/images/none/none_347.gif';	
		});
  </script>
</body>
</html>
